<template>
  <div class="login">
    <div class="loginHeader">
      <div>
        <img src="@/assets/logo.0940ebb5.png" alt="" />
      </div>
      <div class="logintext">欢迎登录</div>
      <div class="hometext" @click="onHome">进入网站首页>></div>
    </div>
    <div class="loginCont">
      <div class="inputK">
        <el-tabs v-model="activeName">
          <el-tab-pane label=" " name="first"> </el-tab-pane>
          <el-tab-pane label="账号登录" name="second">
            <div class="inpt user">
              <span><i class="el-icon-user"></i></span>
              <el-input v-model="ruleForm.username"></el-input>
            </div>
            <div class="inpt pasd">
              <span><i class="el-icon-lock"></i></span>
              <el-input
                placeholder="请输入密码"
                v-model="ruleForm.password"
                show-password
              ></el-input>
            </div>
            <div class="text">
              <el-checkbox v-model="checked"
                >我已同意<span>《隐私条款》</span>和<span
                  >《服务条款》</span
                ></el-checkbox
              >
            </div>
          </el-tab-pane>
          <el-tab-pane label="" name="san"></el-tab-pane>
          <el-tab-pane label="扫码登录" name="si">扫码登录</el-tab-pane>
          <div style="width: 90%; margin: 0 auto">
            <el-button type="primary" @click="submitForm" style="width: 100%"
              >登录</el-button
            >
          </div>
          <div class="qqs">
            <a
              href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback"
              data-v-7453d80e=""
              ><img
                src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                alt=""
                data-v-7453d80e=""
            /></a>
            <a href="#">忘记密码，免费注册</a>
          </div>
        </el-tabs>
      </div>
    </div>
    <p class="heng">
      <a href="#" data-v-17badf56="">关于我们</a>|<a href="#" data-v-17badf56=""
        >帮助中心</a
      >|<a href="#" data-v-17badf56="">售后服务</a>|<a
        href="#"
        data-v-17badf56=""
        >配送与验收</a
      >|<a href="#" data-v-17badf56="">商务合作</a>|<a
        href="#"
        data-v-17badf56=""
        >搜索推荐</a
      >|<a href="#" data-v-17badf56="">友情链接</a>
    </p>
    <p class="heng">CopyRight © 小兔鲜儿</p>
  </div>
</template>

<script>
import user from "@/api/user";
export default {
  name: "login",
  data() {
    return {
      activeName: "second",
      checked: true, //是否勾选
      ruleForm: {
        username: "xiaotuxian001",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    onHome() {
      this.$router.push("/homes");
    },
    submitForm() {
      if (this.checked) {
        let obj = {
          username: this.ruleForm.username,
          password: this.ruleForm.password,
        };
        let _this = this;
        user.loginData(obj).then((res) => {
          this.$store.commit("setToken", res.data.result.token);
          this.$store.commit("setUsername", _this.ruleForm.username);
          this.$router.push("/zong");
          this.$message({
            message: "登录成功",
            type: "success",
          });
        });
      } else {
        this.$message({
          showClose: true,
          message: "请勾选《隐私条款》和《服务条款》",
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.heng {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: gray;
  a {
    margin: 0 5px;
    color: gray;
  }
}
a {
  text-decoration: none;
}
.qqs {
  width: 90%;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  a {
    color: rgba(118, 118, 118, 0.744);
  }
}
.text {
  width: 270px;
  height: 50px;
  margin: 0 auto;
}
.loginHeader {
  width: 100%;
  height: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    display: block;
    width: 240px;
    height: 90px;
  }
  .logintext {
    width: 900px;
    color: gray;
    font-size: 25px;
  }
  .hometext {
    font-size: 17px;
  }
}
.loginCont {
  width: 100%;
  height: 488px;
  background: url("../../assets/login-bg.696efec3.png");
  position: relative;
  .inputK {
    width: 380px;
    background: #fff;
    min-height: 400px;
    position: absolute;
    left: 50%;
    top: 54px;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
    .inpt {
      width: 300px;
      height: 40px;
      outline: 1px solid gray;
      margin: 15px auto;
      display: flex;
      span {
        background: rgba(128, 128, 128, 0.476);
        i {
          width: 30px;
          height: 30px;
          font-size: 25px;
          line-height: 37px;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>